<style scoped>
    .fill-item{height:50px;padding:0 10px;}
    .fill-item input{border:0;height:100%;text-align:right;width:200px;}
    .fill-item .select-box{height:100%;}
    .fill-item select{border:0;height:100%;position:absolute;top:0;right:10px;min-width:200px;opacity: 0;}
    .next-btn{display:block;border-radius:5px;height:45px;text-align: center;line-height: 45px;color:#fff;margin:20px 10px;}
</style>
<template>
  <wrap title="填写用户资料">
    <div slot="page">
      <fill-progress :step="4"></fill-progress>
      <div class="fill-box light-bg margin-bottom">
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15">QQ邮箱</span>
          <input class="font-15" v-model="society.qqEmail" type="text" placeholder="请填写QQ邮箱">
        </div>
      </div>
      <div class="fill-box light-bg margin-bottom" v-for="(c,i) in society.contacts" :key="i">
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15">与申请者的关系</span>
          <i-select v-model="c.relationCode" :option="society.contactRelationList"></i-select>
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15">真实姓名</span>
          <input class="font-15" v-model="c.name" type="text" placeholder="请填写真实姓名">
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15">手机号码</span>
          <input class="font-15" v-model="c.phone" type="number" placeholder="请填写手机号码">
        </div>
      </div>
      <a href="javascript:;" :class="['next-btn',nextEnable?'blue-bg':'grey-9-bg','font-16']" @click="next()">下一步</a>

      <div class="flex flex-center" style="padding-bottom:20px;">
        <a href="javascript:;" class="blue" @click="refuse">拒绝该用户的申请</a>
      </div>
    </div>
  </wrap>
</template>
<script>
    const Validate = {
      mobile: function (num) { // 验证手机
        return /^1[3|4|5|7|8][0-9]\d{8}$/.test(num)
      },
      email: function (email) { // 验证邮箱
        /* eslint-disable*/
        return /^([a-zA-Z0-9]+[_|\_|-|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(email)
      },
      number: function (num) { // 验证数字
        return /^[0-9]*$/.test(num)
      }
    }
import mixins from '~/mixins'
    import wrap from '~/components/wrap.vue'
    import iSelect from '~/components/i-select.vue'
    import city from '~/components/city.vue'
    import fillProgress from './progress.vue'
    export default {
      mixins: [mixins],
      components: {wrap, iSelect, city, fillProgress},
      data () {
        return {
          userId: 0,
          nextEnable: false,
          society: {
            'qqEmail': '',
            'contacts': [],
            'contactRelationList': [
              {
                'value': 0,
                'text': '请选择'
              }
            ]
          }
        }
      },
      created () {
        const self = this
        self.userId = self.$route.params.userId
        self.orderId = self.$route.params.orderId
        self.request({act: 'getSociety', body: {platUserId: self.userId}}).then(res => {
          if (res.code == 0) {
            if (res.data.contacts.length == 0) {
              res.data.contactRelationList.forEach((item, i) => {
                if (item.value != 0 && i < 5) {
                  res.data.contacts.push({relationCode: item.value, name: '', phone: ''})
                }
              })
            }
            self.society = res.data
          } else {
            layer.open({content: res.userMsg, skin: 'msg', time: 2})
          }
        })
        self.$watch('society', () => {
          let flag = true
          self.society.contacts.forEach(item => {
            if (item.relationCode == 0 || !item.name || !item.phone) {
              flag = false
            }
          })
          if (self.society.qqEmail && flag) {
            self.nextEnable = true
          } else {
            self.nextEnable = false
          }
        }, {deep: true})
      },
      methods: {
        next () {
          const self = this
          if (!self.nextEnable) {
            return
          }
          if (!Validate.email(self.society.qqEmail)) {
            layer.open({content: '邮箱格式错误', skin: 'msg', time: 2})
            return
          }
          let relationArr = []
          self.society.contacts.forEach(item => {
            if (item.relationCode <= 4) {
              relationArr.push(1)
            }
          })
          if (relationArr.length < 2) {
            layer.open({content: '至少选择2个直系亲属', skin: 'msg', time: 2})
            return
          }
          layer.open({type: 2, shadeClose: false})
          this.request({
            act: 'saveSociety',
            body: {platUserId: self.userId, contacts: JSON.stringify(self.society.contacts), qqEmail: self.society.qqEmail}
          }).then(res => {
            layer.closeAll()
            if (res.code == 0) {
              self.$router.push('/fill/verify/' + self.userId + '-' + self.orderId)
            } else {
              layer.open({content: res.userMsg, skin: 'msg', time: 2})
            }
          })
        }
      }
    }
</script>
